<template>
	<view>
		<!-- <view class="box1">
			
		</view>
		<view class="box2">
			
		</view> -->
		<view class="id">
			<view class="left">
				<view v-for="(item, index) in list" :key="index" @click="clickId = 'po' + index ; currentNum = index" :class="{active:index===currentNum}">
					{{item.title}}
				</view>
			</view>
			<view class="right">
				<scroll-view scroll-y="true" style="height: 200px;" :scroll-into-view="clickId" scroll-with-animation @scroll="scroll" @scrolltolower="scrolltolower">
					<view v-for="(item, index) in list" :key="index">
						<view class="title" :id="'po' + index">
							{{item.title}}
						</view>
						<view v-for="(listItems, listIndex) in item.list" :key="listIndex">
							{{listItems}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<uni-icons type="camera" size="30" color="black"></uni-icons>
		<view>
			<view>vuex测试</view>
			<view>{{name}}</view>
			<view>数量：{{num}}</view>
			<view>价格：{{count}}</view>
			<button type="default" @click="add">add</button>
			<button type="default" @click="testAction">testActions</button>
		</view>
		<view>
			<view v-for="(item, index) in testList" :key="index">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						title: "中餐",
						list: ["盖饭", "扒饭", "咖喱饭", "鸡排饭"]
					},
					{
						title: "西餐",
						list: ["牛排", "意面", "芝士", "汉堡"]
					},
					{
						title: "法餐",
						list: ["辣子鸡丁", "xxx", "可乐", "雪碧"]
					},
					{
						title: "快餐",
						list: ["薯条", "软子", "大米粥", "饮水"]
					},
				],
				clickId: "",
				currentNum: 0,
				topList: [],
				name: this.$store.state.name
			}
		},
		computed: {
			num(){
				return this.$store.state.num
			},
			count(){
				return this.$store.getters.const
			},
			testList(){
				console.log("run")
				console.log(this.$store.state.testList)
				return this.$store.state.testList
			}
		},
		onReady() {
			this.getNodesInfo()
			
			// 测试请求
			this.testRequest()
		},
		methods: {
			scroll(e){
				// console.log(e.detail.scrollTop)
				let scrollTop = e.detail.scrollTop
				for(let i = 0; i < this.topList.length; i++){
					let h1 = this.topList[i]
					let h2 = this.topList[i + 1]
					if(scrollTop >= h1 && scrollTop < h2){
						this.currentNum = i
					}
				}
			},
			getNodesInfo(){
				// console.log(document)
				// console.log(window)
				const query = uni.createSelectorQuery().in(this);
				// document.querySelector()
				// document.querySelectorAll()
				/* query.select('.title').boundingClientRect(data => {
					console.log(data)
				  console.log("得到布局位置信息" + JSON.stringify(data));
				  console.log("节点离页面顶部的距离为" + data.top);
				}).exec(); */
				/* query.selectAll('.title').boundingClientRect().select('.box2').boundingClientRect().exec((res) => {
					console.log(res)
				}); */
				query.selectAll('.title').boundingClientRect().exec((res) => {
					// console.log(res)
					let nodes = res[0];
					let rel =[];
					nodes.map(item => {
						// console.log(item)
						rel.push(item.top)
					})
					// console.log(rel)
					this.topList = rel
				});
			},
			scrolltolower(){
				// console.log("run")
				setTimeout(() => {
					this.currentNum = 3
				}, 80)
				
			},
			testRequest(){
				// console.log(wx)
				uni.request({
				    url: 'https://bird.ioliu.cn/weather', 
				    data: {
				        city: '北京'
				    },
				    // header: {
				    //     'custom-header': 'hello' 
				    // },
				    success: (res) => {
				        console.log(res.data);
				    }
				});
			},
			add(){
				this.$store.commit("add");
			},
			testAction(){
				console.log(this.$store.dispatch("testActions"))
			}
		}
	}
</script>

<style>
.box1{
	width: 100px;
	height: 100px;
	background: red;
}
.box2{
	width: 100upx;
	height: 100upx;
	background: yellow;
}

.id{
	display: flex;
}
.left{
	width: 100px;
	border: 1px solid red;
}
.right{
	flex: 1;
	border: 1px solid red;
}
.title{
	font-size: 20px;
	font-weight: bold;
	background: pink;
}
.active{
	background: red;
}
</style>
